<!--
 * @Author: your name
 * @Date: 2021-11-26 09:07:40
 * @LastEditTime: 2022-01-12 15:07:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \system_authority_manage\src\components\OrganTreeSelect.vue
-->
<!-- 树状选择器 -->
<template>
  <treeselect
    v-model="selectedData"
    :multiple="multiple"
    :options="options"
    :normalizer="normalizer"
    :default-expand-level="2"
    :value-consists-of="valueConsistsOf"
    placeholder="请选择"
    noChildrenText=""
    noResultsText="暂无数据"
    noOptionsText="暂无数据"
    :flat="flat"
    :sortValueBy="sortValueBy"
    @select="onSelect"
    @open="onOpen" />
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listRecursiveOrgan } from '@api/modules/system.js'
export default {
  name: 'OrganTreeSelect',
  components: {
    Treeselect,
  },
  props: {
    // 接收绑定参数
    value: [String, Array],
    multiple: Boolean,
    flat: Boolean,
    valueConsistsOf: {
      type: String,
      default() {
        return 'ALL'
      },
    },
    sortValueBy: {
      type: String,
      default() {
        return 'ORDER_SELECTED'
      },
    },
    tenantId: String,
    isShow: Boolean,
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal !== '-1') {
        this.selectedData = newVal || null
      } else {
        if (this.multiple) {
          this.selectedData = []
        } else {
          this.selectedData = null
        }
      }
    },
    selectedData(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit('input', newVal)
      }
    },
    tenantId(newVal, oldVal) {
      if (newVal !== oldVal && oldVal) {
        this.searchForm.tenantId = newVal
        this.initdata()
      }
    },
    isShow(bool) {
      if (bool) {
        this.searchForm.tenantId = localStorage.pskh_tenantId || this.tenantId
        this.initdata()
      }
    },
  },
  data() {
    return {
      selectedData: this.value,
      options: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.queryOutVOS,
        }
      },
      searchForm: {
        tenantId: '',
        orgName: '',
      },
    }
  },
  mounted() {
    this.searchForm.tenantId = localStorage.pskh_tenantId || this.tenantId
    this.initdata()
  },
  methods: {
    onOpen() {
      if (this.options.length === 0) {
        this.initdata()
      }
    },
    onSelect(node) {
      // console.log(node.id)
      this.$emit('onSelect', node.id)
    },
    /* 初始化单位 */
    initdata() {
      listRecursiveOrgan({
        ...this.searchForm,
      }).then(res => {
        if (res.status === 200) {
          this.options = res.data
          this.setName(this.options)
        }
      })
    },
    setName(datas) {
      // 遍历树  获取id数组
      for (const i in datas) {
        if (datas[i].queryOutVOS.length === 0) {
          datas[i].queryOutVOS = undefined
        }
        if (datas[i].queryOutVOS) {
          // 存在子节点就递归
          this.setName(datas[i].queryOutVOS)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
